<template>
    <div class="my-dialog">
        <el-dialog v-model="dialogVisible" :title="dialogForm.title" :width="dialogForm.width">
            <el-form :model="form" ref="ruleFormRef" :rules="rules">
                <el-form-item label="批量数据转移：" :label-width="formLabelWidth">
                    将某个人的所有数据转移到另一个人名下
                </el-form-item>
                <el-form-item label="数据原持有人：" :label-width="formLabelWidth" prop="originalId">
                    <el-select v-model="form.originalId" filterable placeholder="输入姓名/手机号搜索匹配"
                        :filter-method="filterOriginal" clearable>
                        <el-option v-for="item in OriginalUsers" :key="item.userId" :label="item.userName"
                            :value="item.userId">
                            <span style="float: left">{{ item.userName }}</span>
                            <span style="float: right;color: var(--el-text-color-secondary);font-size: 13px;">
                                {{item.userLogin }}
                            </span>
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="数据转移至：" :label-width="formLabelWidth" prop="targetId">
                    <el-select v-model="form.targetId" filterable placeholder="输入姓名/手机号搜索匹配"
                        :filter-method="filterTarget" clearable>
                        <el-option v-for="item in TargetUsers" :key="item.userId" :label="item.userName"
                            :value="item.userId">
                            <span style="float: left">{{ item.userName }}</span>
                            <span style="float: right;color: var(--el-text-color-secondary);font-size: 13px;">
                                {{item.userLogin }}
                            </span>
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="数据转移原因：" :label-width="formLabelWidth">
                    <el-input v-model="form.reason" autocomplete="off" type="textarea" :rows="4"
                        placeholder="请输入数据转移原因" />
                </el-form-item>
            </el-form>
            <div class="btn-box">
                <el-button @click="resetForm(ruleFormRef)" :loading="loading">返回</el-button>
                <el-button type="primary" @click="submitForm(ruleFormRef)" :loading="loading">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script setup lang='ts'>
import { store } from '@/store';
import { ElMessage, FormInstance, FormRules } from 'element-plus';
import { ref, reactive, watch, computed } from 'vue'
import { getOriginalUserApi, getTargetUserApi, transferByUserApi } from '../api/familyApi';
const dialogVisible = ref<boolean>(false)//弹窗是否出现
const ruleFormRef = ref<FormInstance>()
const formLabelWidth = '140px'
const dialogForm = {
    width: '30%',
    title: '批量数据转移'
}
interface PropsDialog {
    isShowBDialog: boolean;//弹窗是否出现
}
const props = withDefaults(defineProps<PropsDialog>(), {
    isShowBDialog: false,
});
//监听加载
const loading = computed(() => {
    return store.getters['loading/getLoad']
})

//监控弹窗是否出现
watch(
    () => props.isShowBDialog,
    () => {
        form.originalId = ''
        form.targetId = ''
        form.reason = ''
        dialogVisible.value = !dialogVisible.value
    }
)

const form = reactive({
    originalId: '',
    targetId: '',
    reason: '',
})
const rules = reactive<FormRules>({
    originalId: [
        { required: true, message: '请选择原持有人', trigger: 'change' },
    ],
    targetId: [
        {
            required: true,
            message: '请选择转移目标人员',
            trigger: 'change',
        },
    ],
})

//获取原持有人数据及筛选
const OriginalUsers: any = ref([])
const OriginalUsersCopy: any = ref([])
const OriginalUserChange = (val: any) => {
    let params = { keyword: val }
    getOriginalUserApi(params).then(res => {
        if (res.code == 0) {
            OriginalUsers.value = res.data
            OriginalUsersCopy.value = res.data
        }
    })
}
OriginalUserChange('')
const filterOriginal = (val: any) => {
    if (val) {
        OriginalUsers.value = OriginalUsersCopy.value.filter((item) => {
            if (item.userLogin.indexOf(val) != -1 || item.userName.indexOf(val) != -1) {
                return true
            }
        })
    } else {
        OriginalUsers.value = OriginalUsersCopy.value
    }
}

//获取转移目标人数据及筛选
const TargetUsers: any = ref([])
const TargetUsersCopy: any = ref([])
const TargetUserChange = (val: any) => {
    let params = { keyword: val }
    getTargetUserApi(params).then(res => {
        if (res.code == 0) {
            TargetUsers.value = res.data
            TargetUsersCopy.value = res.data
        }
    })
}
TargetUserChange('')
const filterTarget = (val: any) => {
    if (val) {
        TargetUsers.value = TargetUsersCopy.value.filter((item) => {
            if (item.userLogin.indexOf(val) != -1 || item.userName.indexOf(val) != -1) {
                return true
            }
        })
    } else {
        TargetUsers.value = TargetUsersCopy.value
    }
}

//弹窗关闭事件
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
    dialogVisible.value = !dialogVisible.value
}
//弹窗确定事件
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            transferByUserApi(form).then(res => {
                if (res.code == 0) {
                    store.commit('loading/setLoad', false)//加载中 防止暴击
                    ElMessage.success('转移成功!')
                    dialogVisible.value = !dialogVisible.value
                } else {
                    store.commit('loading/setLoad', false)//加载中 防止暴击
                }
            })
        } else {
            store.commit('loading/setLoad', false)
        }
    })
}
</script>
<style scoped lang='scss'>
.btn-box {
    text-align: right;
}
</style>